<script lang="ts">
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	import Badge from '$lib/components/Data/Badge/Badge.svelte';
</script>

<div class="badge-demo-page">
	<header class="demo-header">
		<h1>Badge 徽章组件</h1>
		<p>用于显示角标、徽章等提示信息，支持多种尺寸、变体和位置设置</p>
	</header>

	<main class="demo-content">
		<!-- 基本用法 -->
		<section class="demo-section">
			<h2>基本用法</h2>
			<div class="demo-grid">
				<div class="demo-item">
					<h3>默认显示</h3>
					<div class="demo-preview">
						<Badge value="5">
							<span class="demo-icon">🗂️</span>
						</Badge>
					</div>
				</div>

				<div class="demo-item">
					<h3>点状显示</h3>
					<div class="demo-preview">
						<Badge dot>
							<span class="demo-icon">🔔</span>
						</Badge>
					</div>
				</div>

				<div class="demo-item">
					<h3>独立使用</h3>
					<div class="demo-preview">
						<Badge value="New" />
					</div>
				</div>

				<div class="demo-item">
					<h3>最大值限制</h3>
					<div class="demo-preview">
						<Badge value={100} max={99}>
							<span class="demo-icon">📦</span>
						</Badge>
					</div>
				</div>
			</div>
		</section>

		<!-- 尺寸变体 -->
		<section class="demo-section">
			<h2>尺寸变体</h2>
			<div class="demo-grid">
				<div class="demo-item">
					<h3>小尺寸 (sm)</h3>
					<div class="demo-preview">
						<Badge value="12" size="sm">
							<span class="demo-icon">📩</span>
						</Badge>
					</div>
				</div>

				<div class="demo-item">
					<h3>中尺寸 (md)</h3>
					<div class="demo-preview">
						<Badge value="12" size="md">
							<span class="demo-icon">📩</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>大尺寸 (lg)</h3>
					<div class="demo-preview">
						<Badge value="12" size="lg">
							<span class="demo-icon">📩</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>点状尺寸对比</h3>
					<div class="demo-preview">
						<span class="demo-inline">
							<Badge dot size="sm">
								<span class="demo-icon">🔴</span>
							</Badge>
						</span>
						<span class="demo-inline">
							<Badge dot size="md">
								<span class="demo-icon">🔴</span>
							</Badge>
						</span>
						<span class="demo-inline">
							<Badge dot size="lg">
								<span class="demo-icon">🔴</span>
							</Badge>
						</span>
					</div>
				</div>
			</div>
		</section>

		<!-- 颜色变体 -->
		<section class="demo-section">
			<h2>颜色变体</h2>
			<div class="demo-grid">
				<div class="demo-item">
					<h3>Primary</h3>
					<div class="demo-preview">
						<Badge value="1" variant="primary">
							<span class="demo-icon">⭐</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>Info</h3>
					<div class="demo-preview">
						<Badge value="2" variant="info">
							<span class="demo-icon">ℹ️</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>Success</h3>
					<div class="demo-preview">
						<Badge value="3" variant="success">
							<span class="demo-icon">✅</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>Warning</h3>
					<div class="demo-preview">
						<Badge value="4" variant="warning">
							<span class="demo-icon">⚠️</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>Error</h3>
					<div class="demo-preview">
						<Badge value="5" variant="error">
							<span class="demo-icon">❌</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>Secondary</h3>
					<div class="demo-preview">
						<Badge value="6" variant="secondary">
							<span class="demo-icon">📌</span>
						</Badge>
				</div>
			</div>
			</div>
		</section>

		<!-- 位置变体 -->
		<section class="demo-section">
			<h2>位置变体</h2>
			<div class="demo-grid">
				<div class="demo-item">
					<h3>顶部 (top)</h3>
					<div class="demo-preview">
						<Badge value="1" position="top">
							<div class="demo-box">内容</div>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>中部 (middle)</h3>
					<div class="demo-preview">
						<Badge value="2" position="middle">
							<div class="demo-box">内容</div>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>底部 (bottom)</h3>
					<div class="demo-preview">
						<Badge value="3" position="bottom">
							<div class="demo-box">内容</div>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>点状位置对比</h3>
					<div class="demo-preview">
						<span class="demo-inline">
							<Badge dot position="top">
								<div class="demo-box-small">A</div>
							</Badge>
						</span>
						<span class="demo-inline">
							<Badge dot position="middle">
								<div class="demo-box-small">B</div>
							</Badge>
						</span>
						<span class="demo-inline">
							<Badge dot position="bottom">
								<div class="demo-box-small">C</div>
							</Badge>
						</span>
					</div>
				</div>
			</div>
		</section>

		<!-- 组合使用 -->
		<section class="demo-section">
			<h2>组合使用</h2>
			<div class="demo-grid">
				<div class="demo-item">
					<h3>大尺寸错误提示</h3>
					<div class="demo-preview">
						<Badge value="99+" size="lg" variant="error" position="top">
							<span class="demo-icon-large">📧</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>小尺寸成功提示</h3>
					<div class="demo-preview">
						<Badge value="5" size="sm" variant="success" position="bottom">
							<span class="demo-icon">🎯</span>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>中部警告提示</h3>
					<div class="demo-preview">
						<Badge value="!" size="md" variant="warning" position="middle">
							<div class="demo-box">注意</div>
						</Badge>
				</div>
			</div>

				<div class="demo-item">
					<h3>隐藏状态</h3>
					<div class="demo-preview">
						<Badge value="10" show={false}>
							<span class="demo-icon">👁️</span>
						</Badge>
				</div>
			</div>
			</div>
		</section>
	</main>
</div>

<style lang="scss">
	.badge-demo-page {
		max-width: 1200px;
		margin: 0 auto;
		padding: 2rem;
	}

	.demo-header {
		text-align: center;
		margin-bottom: 3rem;

		h1 {
			font-size: 2rem;
			font-weight: 700;
			color: var(--color-text-primary, #333);
			margin-bottom: 0.5rem;
		}

		p {
			font-size: 1.1rem;
			color: var(--color-text-secondary, #666);
			max-width: 800px;
			margin: 0 auto;
		}
	}

	.demo-section {
		margin-bottom: 3rem;
		padding: 2rem;
		background-color: var(--color-background-secondary, #fafafa);
		border-radius: var(--border-radius, 8px);
		border: 1px solid var(--color-border, #e8e8e8);

		h2 {
			font-size: 1.5rem;
			font-weight: 600;
			color: var(--color-text-primary, #333);
			margin-bottom: 1.5rem;
			padding-bottom: 0.5rem;
			border-bottom: 2px solid var(--color-primary, #1890ff);
		}

		h3 {
			font-size: 1rem;
			font-weight: 500;
			color: var(--color-text-secondary, #666);
			margin-bottom: 1rem;
		}
	}

	.demo-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1.5rem;
	}

	.demo-item {
		text-align: center;
	}

	.demo-preview {
		min-height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		background-color: var(--color-background, #fff);
		border-radius: var(--border-radius, 6px);
		border: 1px solid var(--color-border, #e8e8e8);
	}

	.demo-icon {
		font-size: 2rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
	}

	.demo-icon-large {
		font-size: 3rem;
		width: 60px;
		height: 60px;
	}

	.demo-box {
		width: 80px;
		height: 40px;
		background-color: var(--color-background-secondary, #f5f5f5);
		border-radius: var(--border-radius, 4px);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.9rem;
		color: var(--color-text-primary, #333);
	}

	.demo-box-small {
		width: 30px;
		height: 30px;
		background-color: var(--color-background-secondary, #f5f5f5);
		border-radius: var(--border-radius, 4px);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--color-text-primary, #333);
	}

	.demo-inline {
		display: inline-flex;
		margin: 0 10px;
	}

	@media (max-width: 768px) {
		.badge-demo-page {
			padding: 1rem;
		}

		.demo-grid {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 1rem;
		}

		.demo-icon {
			font-size: 1.5rem;
			width: 30px;
			height: 30px;
		}

		.demo-icon-large {
			font-size: 2rem;
			width: 40px;
			height: 40px;
		}

		.demo-box {
			width: 60px;
			height: 30px;
		}
	}
</style>